<template>
  <div class="tips" v-show="show">
    <div class="wrapper"  >
        <div class="tips_overlay" :class="[ show ? 'overlay-in' : 'overlay-out' ]">
            <div class="tipBox" :class="[ show ? 'mask-in' : 'mask-out' ]">
              <div class="msg"><h2><i></i> {{msg}}</h2></div>
            </div>
        </div>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
export default {
  name:'tips',
  data() {
    return {
      show:false,
      msg:''
    };
  },
  created () {
    this.bus.$on('tips',(msg) => {
      this.show = true;
      this.msg = msg;
    })
  },
  watch: {
    show: function () {
      if(this.show) {
        setTimeout(() => {
          this.show = false;
        }, 1500);
      }
    }
  }
};
</script>

<style scoped lang="stylus">
/*tipBox*/
.wrapper {font-family: "微软雅黑";font-size: 16px;line-height: 24px;background-size: 100%;height: 92%;}
.wrapper .tipBox {width: 80%;font-size: 16px;position: fixed;left: 10%;top: 30%;background-color: rgba(0, 0, 0, 0.8);text-align: center;color: #fff;line-height: 40px;z-index: 99998;border-radius: 5px;}
.wrapper .tips_overlay .tipBox.mask-in { background-color: rgba(0, 0, 0, 0.8);}
.wrapper .tips_overlay .tipBox.mask-out { background-color: black;}
.wrapper .tipBox.active { -webkit-animation: 1s move alternate 4;}
.wrapper .r5 { border-radius: 5px;}
.wrapper .tipBox .msg { padding: 20px 0;}
.wrapper .tipBox h2 { line-height: 24px; font-weight: normal; text-align: center; font-size: 16px;}
.wrapper .tipBox i { vertical-align: middle; display: inline-block; width: 0.1px; height: 100%;}
.wrapper .overlay, .wrapper .tips_overlay { position: fixed; top: 0; left: 0; z-index: 99999; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.8); transition: all .2s ease-in-out; opacity: 0;}
.wrapper .tips_overlay { background-color: transparent;}
.wrapper .overlay-in { opacity: 1;}
.wrapper .overlay-out { opacity: 0;}
.wrapper .loading_box { width: 80%; font-size: 16px; position: fixed; left: 10%; top: 30%; background-color: black; text-align: center; color: #fff; z-index: 98; border-radius: 5px; padding: 10px 0;}
.wrapper .loading_wrapper { position: fixed; left: 0; top: 0; height: 100%; width: 100%; display: none;}
</style>

